<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>进度条</title>
    <style>
      #myProgress {
        width: 75%;
        background: yellow;
        height: 42px;
      }
      #myBar {
        height: 100%;
        width: 0px;
        background: chocolate;
        text-align: center;
        line-height: 42px;
      }
    </style>
  </head>
  <body>
    <h1>JavaScript 进度条</h1>

    <div id="myProgress">
      <div id="myBar">
        <span id="sp"></span>
      </div>
    </div>

    <br />
    <button onclick="move()">点我</button>
    <script>
      let bar = document.getElementById("myBar");
      let sp = document.getElementById("sp");
      function move() {
        let ita = 1;
        let num = setInterval(() => {
          ita += 1;
          bar.style.width = ita + "%";
          sp.innerHTML = ita + "%";
          if (ita >= 100) {
            clearInterval(num);
          }
        }, 10);
      }
    </script>
  </body>
</html>
